@if ($article(); as article) {
  <div class="article-page">
    <div class="banner">
      <div class="container">
        <h1 data-testid="article-title">{{ article.title }}</h1>
        <cdt-article-meta
          [article]="article"
          (follow)="follow($event)"
          (unfollow)="unfollow($event)"
          (favorite)="favorite($event)"
          (unfavorite)="unfavorite($event)"
          (delete)="delete($event)"
          [canModify]="$canModify()"
        >
        </cdt-article-meta>
      </div>
    </div>

    <div class="container page">
      <div class="row article-content">
        <div class="col-md-12">
          <div data-testid="article-body" [innerHTML]="article.body | markdown"></div>
        </div>
      </div>
      <hr />
      <div class="article-actions">
        <cdt-article-meta
          [article]="article"
          (follow)="follow($event)"
          (unfollow)="unfollow($event)"
          (favorite)="favorite($event)"
          (unfavorite)="unfavorite($event)"
          (delete)="delete($event)"
          [canModify]="$canModify()"
        ></cdt-article-meta>
      </div>

      <div class="row">
        <div class="col-xs-12 col-md-8 offset-md-2">
          @if ($isAuthenticated()) {
            <cdt-add-comment [article]="article" [currentUser]="$currentUser()" (submitComment)="submit($event)" />
          } @else {
            <a [routerLink]="['/login']">Sign in</a> or <a [routerLink]="['/register']">sign up</a> to add comments on
            this article.
          }

          @for (comment of $comments(); track comment.id) {
            <cdt-article-comment
              [currentUser]="$currentUser()"
              (delete)="deleteComment($event)"
              [article]="article"
              [comment]="comment"
            ></cdt-article-comment>
          }
        </div>
      </div>
    </div>
  </div>
}
